<template>
	<view class="type-list">
		<view class="list-box">
			<navigator v-for="item in list" :key="item.id" :url="`/pages/question/questionList?topicCode=${item.type}&type=1&opc=${opc}&name=${item.name}`" class="list-box-link">
				<view class="list-item">
					<text class="title">{{item.name}}</text>
					<text class="title-num">{{item.total}}题</text>
					<view class="progress">
						<cmd-progress stroke-color="#CDE9F4" :stroke-width="10" :success-percent="Math.round(Number(item.hasNum)/Number(item.total)*100)" :percent="Math.round(Number(item.hasNum)/Number(item.total)*100)"></cmd-progress>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"

import { getTopicProgress } from '@/http/user'
	export default {
		components: {
			cmdProgress
		},
		data() {
			return {
				opc: '',
				list: []
			}
		},
		onLoad(options) {
			this.opc = options.opc
			this.getTopicProgress()
		},
		methods: {
			async getTopicProgress() {
				const res = await getTopicProgress({opc: this.opc})
				if(res.data.length){
					this.list = res.data
				}else{
					uni.showModal({
						title: '暂无数据',
						icon: 'none',
						content: '已经在加急开发中，敬请期待',
						showCancel: false,
						success: () => {
							uni.navigateBack()
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.type-list {
		.list-box {
			display: grid;
			grid-template-columns: repeat(2, 10fr);
			grid-column-gap: 20rpx;
			padding: 0 20rpx;
			margin-top: 40rpx;
		}
		.list-box-link{
			margin-bottom: 30rpx;
			box-shadow: 0px 0px 20rpx 2rpx rgba(66, 63, 63, 0.35);
			border-radius: 20rpx;
			overflow: hidden;
			
			
			background: $uni-gradient-primary;
		}


		.list-item {
			background: url(https://img.qiananquang.com/minapp/img2.png) no-repeat;
			background-position: calc(100% - 10rpx) top;
			background-size: auto 100rpx; /* 或者使用您需要的尺寸单位 */
			// height: 220rpx;
			padding: 40rpx;

			.title {
				font-weight: 600;
				font-size: 34rpx;
				color: #1E1E20;
				display: block;
				margin-bottom: 10rpx;

			}

			.title-num {
				font-weight: 400;
				font-size: 30rpx;
				color: #5C5C5C;
			}

			.progress {
				margin-top: 20rpx;
			}
		}
	}
</style>